<template>
    <div class="rightDiv">
        <div class="ChatDotRound">
            <el-icon size="20">
                <ChatDotRound />
            </el-icon>
        </div>
        <div class="CirclePlus">
            <el-icon size="20">
                <CirclePlus />
            </el-icon>
        </div>
        <div class="avatar">
            <img src="../../../../../public/9.jpg" alt="">
        </div>
        <div>
            <el-dropdown @command="onCommand">
                <el-button  class="el-dropdown-link">
                    {{ realname }}
                    <el-icon class="el-icon--right">
                        <arrow-down />
                    </el-icon>
                </el-button>
                <template #dropdown>
                    <el-dropdown-menu>
                        <el-dropdown-item command="editUserName">
                            <el-icon>
                                <UserFilled />
                            </el-icon>
                            个人主页
                        </el-dropdown-item>
                        <el-dropdown-item divided> 帮助文档</el-dropdown-item>
                        <el-dropdown-item>功能更新</el-dropdown-item>
                        <el-dropdown-item>提交反馈/建议</el-dropdown-item>
                        <el-dropdown-item divided>
                            <el-icon>
                                <Tools />
                            </el-icon>
                            账号设置
                        </el-dropdown-item>
                        <el-dropdown-item divided command="logOut">
                            <el-icon>
                                <CloseBold />
                            </el-icon>
                            退出登陆
                        </el-dropdown-item>
                    </el-dropdown-menu>
                </template>
            </el-dropdown>
        </div>
    </div>
</template>

<script setup lang="ts">
/**
 * 定义接口
 * 定义props接口类型
 */
interface IProps {
    realname: string;
    userLogout: () => void;
}
/**
 * 获取数据
 * 获取props数据
 */
const props = defineProps<IProps>()


/**
 * 操作函数
 * 下拉菜单
 * @param cmd 传入的每一个操作方法
 */
const onCommand = (cmd: keyof typeof dropDownMethods) => {
    try {
        dropDownMethods[cmd]()
    } catch (error) {

    }
}
/**
 * 下拉菜单操作方法
 * editUserName  编辑用户
 * logOut   退出登陆
 */
import { ElMessageBox } from "element-plus";
const dropDownMethods = {
    editUserName() {
        console.log('修改用户')
    },
    async logOut() {
        try {
            await ElMessageBox.confirm(
                'Do you really want to log out of this login?',
                'Exit prompt',
                {
                    confirmButtonText: 'OK',
                    cancelButtonText: 'Cancel',
                    type: 'warning',
                }
            )
            props.userLogout()
        } catch (error) {

        }
    }
}
</script>

<style lang="scss" scoped>
.rightDiv {
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-size: 16px;

    div {
        margin: 0 20px 0 0;
    }
}

.avatar {
    img {
        width: 30px;
        height: 30px;
        border-radius: 100px;
    }
}

.example-showcase .el-dropdown-link {
    cursor: pointer;
    color: var(--el-color-primary);
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.ChatDotRound,
.CirclePlus,
.el-dropdown-link {
    cursor: pointer;
}
</style>